<template>
	<view class="loginsafe">
		<view class="marign">

		</view>
		<view class="line-input">
			<view class="input-title">
				{{t('user.telnumber')}}
			</view>
			<text>{{showtelnumber}}</text>
		<!-- 	<input type="text" class="input" :placeholder="t('user.intelnumber')" v-model="telnumber"
				placeholder-class="placeholder-class"> -->
		</view>
		<view class="line-input">
			<view class="input-title">
				{{t('user.mscode')}}
			</view>
			<input type="text" class="input" :placeholder="t('user.inmscode')" v-model="msgcode"
				placeholder-class="placeholder-class">
			<view class="lin">

			</view>
			<view class="butcode" @tap="sendcode" v-if="!codesetime">
				<text v-if="mscodetype== 1">{{t('user.codecl')}}</text>
				<text v-else-if="mscodetype == 2">{{t('user.Reacquire')}}</text>
			</view>
			<view class="butcode" v-else>
				<text>{{mscodenumber}} s</text>
			</view>
		</view>
		<view class="line-input">
			<view class="input-title">
				{{t('user.newpassword')}}
			</view>
			<input type="text" class="input" :placeholder="t('user.newpassword')" v-model="newpassword"
				placeholder-class="placeholder-class">
		</view>
		<view class="line-input">
			<view class="input-title">
				{{t('user.enterpassword')}}
			</view>
			<input type="text" class="input" :placeholder="t('user.inenterpassword')" v-model="enterpassword"
				placeholder-class="placeholder-class">
		</view>
		<view class="button" @tap="setpassword" v-if="showbutton">
			{{t('user.enterbutton')}}
		</view>
		<view class="button" style="opacity: 0.4;" v-else>
			{{t('user.enterbutton')}}
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		smsSend
	} from '@/api/login/login.js'
	import {
		ucSetPwd,
		
	} from '@/api/setuserinfo/setuserinfo.js'
	import {
		ref,computed
	} from "vue";
	import {
		useI18n
	} from "vue-i18n";
	const {
		t
	} = useI18n()
	const telnumber = ref('')
	const test_reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
	const msgcode = ref('')
	const newpassword = ref('')
	const enterpassword = ref('')
	const mscodetype = ref(1)
	const codesetime = ref(false)
	const mscodenumber = ref(0)
	const showtelnumber = computed(() =>{
		const userInfo = uni.getStorageSync('userInfo')
		let tel = String(userInfo.mobile)
		 const head = tel.slice(0, 3);
		  const tail = tel.slice(tel.length - 4);
		  if (tel == ''||tel == undefined || tel == null) {
		    return ''
		  } else {
		    return head + "****" + tail;
		  }
	
	})
	onLoad(()=>{
		const userInfo = uni.getStorageSync('userInfo')
		telnumber.value =userInfo.mobile
	})
	const showbutton = computed(() =>{
		return !!telnumber.value&& !!msgcode.value&&!!newpassword.value&&!!enterpassword.value
	})
	uni.setNavigationBarTitle({
		title: t('user.loginpassword')
	});
	const sendcode = () => {
		if (telnumber.value != '') {
			if (!test_reg.test(telnumber.value)) {
				uni.showToast({
					title: t('user.suretel'),
					icon: 'none',
					duration: 1000
				})
				return
			}
		} else {
			uni.showToast({
				title: t('user.intel'),
				icon: 'none',
				duration: 1000
			})
			return
		}
		mscodenumber.value = 60
		codesetime.value = true
		mscodetype.value = 2
		let data = {
			type: 6,
			mobile: telnumber.value
		}
		
		smsSend(data).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: res.msg,
					duration: 1500,
					icon: 'success'
				})
			}
		}).catch(err => {
			console.log('err', err)
			uni.showToast({
				title: err.msg,
				duration: 1500,
				icon: 'error'
			})
		})
		let timer = setInterval(() => {
			mscodenumber.value--
			if (mscodenumber.value == 0) {
				codesetime.value = false
				clearInterval(timer)
			}
		}, 1000)
	}
	const setpassword = () => {
		let data = {
			mobile: telnumber.value,
			verify_code: msgcode.value,
			password: newpassword.value,
			re_password: enterpassword.value
		}
		ucSetPwd(data).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: res.msg,
					duration: 1500,
					icon: 'success'
				})
				setTimeout(() =>{
					uni.navigateBack()
				},1500)
			}
		}).catch(err => {
			console.log('err', err)
			uni.showToast({
				title: err.msg,
				duration: 1500,
				icon: 'error'
			})
		})
	}

	
</script>

<style scoped lang="scss">
	.loginsafe {
		width: 100%;
		min-height: 100vh;

		.marign {
			width: 100%;
			height: 16rpx;
			background: rgba(247, 247, 252, 1);
		}
	}

	.button {
		position: fixed;
		bottom: 30%;
		left: 50%;
		transform: translateX(-50%);
		width: 624rpx;
		height: 96rpx;
		opacity: 1;
		border-radius: 146rpx;
		background: rgba(71, 111, 254, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: 600;
		letter-spacing: 0px;
		line-height: 23.17px;
		color: rgba(255, 255, 255, 1);
	}

	.x {
		opacity: 0.4;
	}

	.line-input {
		display: flex;
		align-items: center;
		background: #fff;
		display: flex;
		padding: 22rpx 32rpx;
		padding-bottom: 26rpx;
		box-sizing: content-box;
		border-bottom: 1px solid rgba(245, 245, 245, 1);
		width: 100%;

		.input {
			width: 41%;
		}

		.lin {
			width: 2rpx;
			height: 24rpx;
			background-color: rgba(217, 217, 217, 1);

		}

		.butcode {
			font-size: 24rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 16.8px;
			color: rgba(71, 111, 254, 1);
			flex-grow: 1;
			text-align: center;
		}

		.placeholder-class {
			font-size: 16px;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 22.4px;
			color: rgba(175, 175, 175, 1);
		}

		.input-title {
			width: 30%;
			font-size: 32rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 22.4px;
			color: rgba(51, 51, 51, 1);
			text-align: left;
			vertical-align: top;
		}
	}
</style>